<template>
    <el-dialog v-model="isShow" title="户型纠错" @close="closeDialog">
        <div>
            <div class="flex_str_clon">
                <div class="imgNameSty">
                    <div><span style="color: #E21C20;">*</span>上传原始框架图片：</div>
                    <div class="txtSty">支持多选,最多上传5张图片</div>
                </div>
                <div>
                    <el-upload action="" v-model:file-list="yskjfileList" list-type="picture-card"
                        :http-request="yskjUpdate" :multiple="true" :limit="8" :on-remove="yskjRemoveImg">
                        <el-icon>
                            <Plus />
                        </el-icon>
                    </el-upload>
                </div>
            </div>
            <div class="flex_str_clon"  style="margin-top: 30px;">
                <div><span style="color: #E21C20;">*</span>错误描述:</div>
                <textarea class="areaSty" v-model="params.errorDescription"></textarea>
            </div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button @click="submit" type="primary">提交</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref, toRefs } from 'vue'
import type { UploadUserFile } from 'element-plus'
import { updateFileApi, reportedErrorApi } from '@/api/index/index';
import { ElLoading,ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
const router = useRouter()

const props = defineProps({
    isShow: {
        type: Boolean,
        defaul: false
    }
})
const emit = defineEmits(['close'])
const { isShow } = toRefs(props)
const params = reactive({
    houseId:router.currentRoute.value.query.id,
    drawingIds:'',
    errorDescription:''
})
const yskjfileList = ref<UploadUserFile[]>([
])
const yskjImgNameArr = ref<any>([])
const yskjRemoveImg = (e: any) => {
    yskjImgNameArr.value = yskjImgNameArr.value.filter((item: any) => item.name != e.name)
}
// 原始框架图片上传
const yskjUpdate = (uploadFile: any) => {
    const loading = ElLoading.service({
        lock: true,
        text: '上传中...',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    const file = uploadFile.file;
    const formData = new FormData();
    formData.append("file", file);
    updateFileApi(formData).then((res: any) => {
        console.log('文件上传:', res)
        loading.close()
        let obj = {
            name: res.data.fileName,
            id: res.data.fileId
        }
        yskjImgNameArr.value.push(obj)
    })
}
const cancel = () => {
    emit('close')
}
const submit = ()=>{
    console.log(params)
    yskjImgNameArr.value.map((v:any)=>{
        params.drawingIds += v.id + ','
    })
    if(params.drawingIds == ''){
        ElMessage.warning('请上传错误信息图片')
        return
    }
    if(params.errorDescription == ''){
        ElMessage.warning('请输入错误信息描述')
        return
    }
    
  
    reportedErrorApi(params).then((res:any)=>{
        console.log(res)
        if(res.status == 200){
            ElMessage.success('提交成功')
            params.drawingIds = ''
            emit('close')
        }
    })
}
const closeDialog = ()=>{
    params.errorDescription = ''
    params.drawingIds = ''
}
</script>
<style scoped>
.areaSty{
    width: 600px;
    min-height: 200px;
    margin:0 20px;
}
.imgNameSty {
    width: 27%;
    margin-right: 30px;
}
.textSty {
    width: 400px;
    height: 200px;
    resize: none;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>